import React, { VFC, useEffect, useState} from "react"
import { Form, Input, Button, Radio, message, Modal } from 'antd';

import { editSysMenu, saveSysMenu} from '@services/manager'
import { pick} from '@tools/utils'
import { GetDIC } from '@api/index'

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

type PropsType = {
    dataInfo?:any[]|null
    onCancel:() => void
    isVisible:boolean
}

type ItemType = {
    key:string
    value:string
}
const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
};

const Edit:VFC = (props:PropsType) => {
    const initFormInfo = {
        name:undefined,
        routePath:undefined,
        roleId:undefined,
        clientType:undefined,
    }
    const {dataInfo, isVisible, onCancel} = props;
    const [formInfo, setFormInfo] = useState<any>(initFormInfo);
    const [roleId, setRoleId] = useState<string|undefined>(undefined);
    const clientTypeList = GetDIC('clientType');
    useEffect(()=>{
        if(dataInfo) setFormInfo(dataInfo)
    }, []);

    // 修改输入框值
    const onChange = (e:any, type:string) => {
        setFormInfo({
            ...formInfo,
            [type]: e?.target?e.target.value:e
        })
    }
    // 提交表单数据
    const submit = async () => {
        const params = pick(formInfo, [
            "id",
            "name",
            "routePath",
            "roleId",
            "clientType"
        ]);
        if(!params.name){
            message.error('请输入用户名称');
            return
        }
        const method = formInfo.id ? editSysMenu: saveSysMenu
        const { data, status } = await method(params)
        if(status == '0'){
            message.success('提交成功');
            onCancel()
        }
    };
    
    return (
        <Modal visible={isVisible}  title={dataInfo?"编辑":"添加"} onCancel={onCancel} footer={false}>
            <Form {...layout}>
                <FormItem label="用户名">
                    <Input value={formInfo.name} onChange={e => onChange(e, 'name')} placeholder="请输入菜单名称"/>
                </FormItem>
                <FormItem label="路由地址">
                    <Input value={formInfo.routePath} onChange={e => onChange(e, 'routePath')} />
                </FormItem>
                <FormItem label="客户端">
                    <RadioGroup onChange={e => onChange(e, 'clientType')} value={formInfo.clientType}>
                        {Object.keys(clientTypeList).map(key => {
                            return <Radio  value={key}>{clientTypeList[key]}</Radio>
                        })
                        }
                    </RadioGroup>
                </FormItem>
                <FormItem label="菜单级别">
                    <RadioGroup onChange={e => onChange(e, 'level')} value={formInfo.level}>
                        <Radio.Button  value={1}>一级菜单</Radio.Button>
                        <Radio.Button  value={2}>二级菜单</Radio.Button>
                    </RadioGroup>
                </FormItem>
                {
                    formInfo.level==2&&<FormItem label="父级菜单">
                        <Input type="password" value={formInfo.password} onChange={e => onChange(e, 'password')} placeholder="请输入小组名称"/>
                    </FormItem>
                }
                <FormItem label="所属权限">
                </FormItem>
                <FormItem wrapperCol={{ offset: 10, span: 16 }}>
                    <Button type="primary" onClick={submit}>提交</Button>
                </FormItem>
            </Form>
        </Modal>
    )
}
export default Edit
